.multiselect__spinner
  position: absolute
  right: 1px
  top: 1px
  width: 3rem
  height: 2.1875rem
  background: #fff
  display: block

  &:before,
  &:after
    position: absolute
    content: ''
    top: 50%
    left: 50%
    margin: 0.875rem 0 0 0.875rem
    width: 1rem
    height: 1rem
    border-radius: 100%
    border-color: #41B883 transparent transparent
    border-style: solid
    border-width: 2px
    box-shadow: 0 0 0 1px transparent

  &:before
    animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62)
    animation-iteration-count: infinite

  &:after
    animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8)
    animation-iteration-count: infinite

.multiselect__loading-transition
  transition: opacity 0.4s ease-in-out
  opacity: 1

.multiselect__loading-enter,
.multiselect__loading-leave
  opacity: 0

.multiselect,
.multiselect__input,
.multiselect__single
  font:
    family: inherit
    size: 0.875rem
    weight: lighter

.multiselect
  box-sizing: content-box

  *
    box-sizing: border-box

  display: block
  position: relative
  width: 100%
  min-height: 2.5rem
  text-align: left
  color: #35495E

  &:focus
    outline: none

  &--active
    z-index: 50

    .multiselect__current,
    .multiselect__input,
    .multiselect__tags
      border-bottom-left-radius: 0
      border-bottom-right-radius: 0

    .multiselect__select
      transform: rotateZ(180deg)

.multiselect__input,
.multiselect__single
  position: relative
  display: inline-block
  min-height: 1.25rem
  line-height: 1.25rem
  border: none
  border-radius: 0.3125rem
  background: #fff
  padding: 1px 0 0 0.3125rem
  width: auto
  transition: border .1s ease
  box-sizing: border-box
  margin-bottom: 0.5rem

  &:hover
    border-color: darken(#E8E8E8, 10%)

  &:focus
    border-color: darken(#E8E8E8, 25%)
    outline: none

.multiselect__single
  padding-left: 0.375rem
  margin-bottom: 0.5rem

.multiselect__tags
  min-height: 2.5rem
  display: block
  padding: 0.5rem 2.5rem 0 0.5rem
  border-radius: 0.3125rem
  border: 1px solid #E8E8E8
  background: #fff

.multiselect__tag
  position: relative
  display: inline-block
  padding: 0.25rem 1.625rem 0.25rem 0.625rem
  border-radius: 0.3125rem
  margin-right: 0.625rem
  color: #fff
  line-height: 1
  background: #41B883
  margin-bottom: 0.5rem

.multiselect__tag-icon
  cursor: pointer
  margin-left: 7px
  position: absolute
  right: 0
  top: 0
  bottom: 0
  font:
    weight: 700
    style: initial
  width: 1.375rem
  text-align: center
  line-height: 1.375rem
  transition: all 0.2s ease
  border-radius: 0.3125rem

  &:after
    content: "\00D7"
    color: darken(#41B883, 20%)
    font-size: 0.875rem

  &:focus, &:hover
    background: darken(#41B883, 8%)

    &:after
      color: white

.multiselect__current
  line-height: 1rem
  min-height: 2.5rem
  box-sizing: border-box
  display: block
  overflow: hidden
  padding: 0.5rem 0.75rem 0
  padding-right: 1.875rem
  white-space: nowrap
  margin: 0
  text-decoration: none
  border-radius: 0.3125rem
  border: 1px solid #E8E8E8
  cursor: pointer

.multiselect__select
  line-height: 1rem
  display: block
  position: absolute
  box-sizing: border-box
  width: 2.5rem
  height: 2.375rem
  right: 1px
  top: 1px
  padding: 0.25rem 0.5rem
  margin: 0
  text-decoration: none
  text-align: center
  cursor: pointer
  transition: transform 0.2s ease

  &:before
    position: relative
    right: 0
    top: 65%
    color: #999
    margin-top: 0.25rem
    border-style: solid
    border-width: 0.3125rem 0.3125rem 0 0.3125rem
    border-color: #999999 transparent transparent transparent
    content: ""

.multiselect__placeholder
  color: #ADADAD
  display: inline-block
  margin-bottom: 0.625rem
  padding-top: 0.125rem

  .multiselect--active &
    display: none

.multiselect__content
  position: absolute
  list-style: none
  display: block
  background: #fff
  width: 100%
  max-height: 15rem
  overflow: auto
  padding: 0
  margin: 0
  border: 1px solid #E8E8E8
  border-top: none
  border-bottom-left-radius: 0.3125rem
  border-bottom-right-radius: 0.3125rem
  z-index: 50

  &::webkit-scrollbar
    display: none

.multiselect__option
  display: block
  padding: 0.75rem
  min-height: 2.5rem
  line-height: 1rem
  font-weight: 300
  text-decoration: none
  text-transform: none
  vertical-align: middle
  position: relative
  cursor: pointer

  &:after
    top: 0
    right: 0
    position: absolute
    line-height: 2.5rem
    padding-right: 0.75rem
    padding-left: 1.25rem

  &--highlight
    background: #41B883
    outline: none
    color: white

    &:after
      content: attr(data-select)
      color: white

  &--selected
    background: #F3F3F3
    color: #35495E
    font-weight: bold

    &:after
      content: attr(data-selected)
      font-weight: 300
      color: darken(#F3F3F3, 20%)

.multiselect__option--selected.multiselect__option--highlight
  background: #FF6A6A
  color: #fff
  font-weight: lighter

  &:after
    content: attr(data-deselect)
    color: #fff

.multiselect--disabled
  background: darken(#fff, 7%)
  pointer-events: none

  .multiselect__current,
  .multiselect__select
    background: darken(#fff, 7%)
    color: darken(#fff, 35%)

.multiselect__option--disabled
  background: darken(#fff, 7%)
  color: darken(#fff, 35%)
  cursor: text
  pointer-events: none

  &:visited
    color: darken(#fff, 35%)

  &:hover,
  &:focus
    background: darken(#41B883, 3%)

.multiselect-transition
  transition: all .3s ease

.multiselect-enter, .multiselect-leave
  opacity: 0
  max-height: 0 !important
